<template>
  <cjui-page-panel header="Notification 通知">
    <template #intro>
      修改了样式。
    </template>

    <el-button v-for="item in btns" :key="item.type" :type="item.type" @click="openNotification(item.type)">
      {{ item.label }}
    </el-button>
  </cjui-page-panel>
</template>

<script lang="ts" setup>
const btns = [
  { label: '提示', type: 'primary' },
  { label: '删除', type: 'danger' },
  { label: '成功', type: 'success' },
  { label: '警告', type: 'warning' },
]

// 消息弹框
const message = useMessage()
function openNotification(type: string) {
  if (type === 'primary') {
    message.notify('这是一段消息信息。')
  } else if (type === 'danger') {
    message.notifyError('这是一段消息信息。')
  } else if (type === 'success') {
    message.notifySuccess('这是一段消息信息。')
  } else if (type === 'warning') {
    message.notifyWarning('这是一段消息信息。')
  }
}
</script>
